<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成员管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/plugins/bootstrapValidator/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/plugins/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/plugins/select2/css/select2-bootstrap.min.css"/>

    <link rel="stylesheet" href="/css/chosen.css"/>

    <style>
        .table-hover > tbody > tr:hover {
            background-color: #C6E2FF
        }
        .card {width: 50%;float:left}
        .card .select-box .chosen-select option {width: 200px}
    </style>
</head>
<body>

    <div class="card">
        <div>
            <strong th:text="${role.roleName}">**角色</strong> 包含用户列表
            <button class="btn btn-primary btn-sm float-right mt-0" @click="$router.back(-1)">
                <i class="fa fa-back"></i> 返回</button>
        </div>
        <table id="exampleTable" data-classes="table table-hover table-condensed">
            <thead>
            <tr>
            </tr>
            </thead>
        </table>
    </div>
    <div class="card">
        <strong>候选用户</strong>
        <br><br>
        <div id="select-box" class="select-box">
            <select id="chosen-select" data-placeholder="请选择部门名称" multiple  class="chosen-select">
                <option value=""> -- 请选择 -- </option>
                <option th:each="dept:${deptList}"  th:value="${dept.id}" th:text="${dept.name}" value="1">飞行部</option>
            </select>
            姓名：<input type="text"/>
            <button>获取部门员工</button>
            <button>批量增加</button>
        </div>
        <br><br>
            <table class="table table-bordered" width="80%">
                <tr>
                    <th>授权</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                <tr th:each="user : ${userList}">
                    <td><input type="checkbox"></td>
                    <td th:text="${user.workNo}">A01109</td>
                    <td th:text="${user.userName}">周某某</td>
                    <td th:text="${user.deptName}">信息管理部</td>
                    <td>
                        <button>增加</button>
                    </td>
                </tr>
            </table>
        </div>
<script src="/js/jquery.min.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<script src="/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
<script src="/plugins/layer/layer.js"></script>
<script src="/plugins/select2/js/select2.full.min.js"></script>

<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="/plugins/zTree/js/jquery.ztree.exedit.js"></script>

    <script type="text/javascript" src="/js/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="/js/system/accessManagement/roleUserEdit.js"></script>

</body>
</html>